<template>
    <div>
        <el-card class="box-card">

            <el-form :inline="true"
                     :model="queryForm"
                     label-width=""
                     size="mini">
                <el-form-item>
                    <el-button type="primary"
                               @click="addCommercial(1)">新增停车场信息</el-button>
                </el-form-item>
                <el-form-item label="停车场名称:">
                    <el-input v-model="queryForm.nickName"
                              placeholder="请输入订单编号"
                              clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"
                               @click="handlerSearch()">搜索</el-button>
                    <el-button @click="handlerReset()">重置</el-button>
                </el-form-item>
            </el-form>

            <div class="table">
                <el-table :data="dataList"
                          style="width: 100%"
                          :row-class-name="tableRowClassName"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection"
                                     width="50">
                    </el-table-column>
                    <el-table-column label="序号"
                                     type="index"
                                     width="130">
                    </el-table-column>
                    <el-table-column prop="name"
                                     label="停车场名称"
                                     width="170">
                    </el-table-column>
                    <el-table-column prop="detailAddress"
                                     label="详细地址"
                                     width="170">
                    </el-table-column>
                    <el-table-column prop="remark"
                                     label="备注"
                                     width="170">
                    </el-table-column>
                    <el-table-column prop="outCount"
                                     label="出口数量"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="inCount"
                                     label="入口数量"
                                     width="140">
                    </el-table-column>
                    <el-table-column prop="preCount"
                                     label="预支付二维码数量"
                                     width="170">
                    </el-table-column>
                    <el-table-column prop="createdTime"
                                     label="创建时间"
                                     width="170">
                    </el-table-column>
                    <el-table-column prop="updatedTime"
                                     label="最后修改时间"
                                     width="170">
                    </el-table-column>
                    <el-table-column label="操作"
                                     fixed="right"
                                     width="170">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row,2)"
                                       type="text"
                                       size="small">编辑</el-button>
                            <el-button @click="handleClickDelete(scope.row)"
                                       type="text"
                                       size="small">删除</el-button>
                            <el-button @click="startUsing(scope.row)"
                                       type="text"
                                       size="small">查看详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-card>

        <el-dialog :title="addtitle"
                   :append-to-body="true"
                   :visible.sync="dialogVisible"
                   width="30%"
                   :before-close="handleClose">
            <el-form :model="ruleForm"
                     status-icon
                     :rules="rules"
                     ref="ruleForm"
                     label-width="100px"
                     class="demo-ruleForm">
                <el-form-item label="停车场名称"
                              prop="name">
                    <el-input type="text"
                              placeholder="请输入停车场名称"
                              v-model="ruleForm.name"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="详细地址"
                              prop="detailAddress">
                    <el-input type="text"
                              placeholder="请输入详细地址"
                              v-model="ruleForm.detailAddress"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注"
                              prop="remark">
                    <el-input v-model="ruleForm.remark"
                              placeholder="请输入备注"></el-input>
                </el-form-item>
                <div class="btnBox">
                    <el-button @click="dialogVisible=false">取消</el-button>
                    <el-button type="primary"
                               @click="submitForm('ruleForm')">确定</el-button>
                </div>

            </el-form>
        </el-dialog>
        <div class="page">
            <div class="block">
                <el-pagination @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage1"
                               :page-sizes="[10, 20, 50, 100]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="totalNum"
                               prev-text="上一页"
                               next-text="下一页">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryForm: {
                nickName: '',
            },
            multipleSelection: [],
            addtitle: '',
            forbiddenId: '',
            dialogVisibleForbidden: false,
            state: '',
            dialogVisible: false,
            enable: true,
            currentPage1: 1,
            pageSize: 10,
            totalNum: 0,
            dataList: [],
            id: '',
            brandNum: '',
            timeNum: '',
            ruleForm: {
                name: '',
                detailAddress: '',
                remark: '',
            },
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入停车场名称',
                        trigger: 'blur',
                    },
                ],
                detailAddress: [
                    {
                        required: true,
                        message: '请输入详细地址',
                        trigger: 'change',
                    },
                ],
                remark: [
                    { required: true, message: '备注', trigger: 'change' },
                ],
                appid: [
                    {
                        required: true,
                        message: '请输入AppId',
                        trigger: 'change',
                    },
                ],
                privateKey: [
                    {
                        required: true,
                        message: '请输入商户密钥',
                        trigger: 'change',
                    },
                ],
                serial: [
                    {
                        required: true,
                        message: '请输入商户证书序列号',
                        trigger: 'change',
                    },
                ],
                apiV3Key: [
                    {
                        required: true,
                        message: '请输入ApiV3Key',
                        trigger: 'change',
                    },
                ],
                status: [{ required: false, trigger: 'change' }],
            },
            forbiddenState: 0,
        }
    },
    created() {
        this.getDateList()
    },
    methods: {
        //  搜索
        handlerSearch() {
            this.getDateList()
        },
        handlerReset() {
            this.queryForm.nickName = ''
        },
        handleCloseForbidden() {
            this.dialogVisibleForbidden = false
        },

        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row'
            } else if (rowIndex === 3) {
                return 'success-row'
            }
            return ''
        },
        handleCurrentChange(val) {
            console.log(val, '1')
            this.currentPage1 = val
            this.getDateList()
        },
        handleSizeChange(val) {
            console.log(val, '2')
            this.pageSize = val
            this.getDateList()
        },
        addCommercial(e) {
            this.addtitle = '新增停车场信息'
            this.ruleForm.name = ''
            this.ruleForm.detailAddress = ''
            this.ruleForm.remark = ''
            this.ruleForm.status = ''
            this.state = e
            this.dialogVisible = true
        },
        //   删除
        handleClickDelete(e) {
            this.$confirm('确定删除该停车场信息？, 是否继续？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    let idList = []
                    if (this.multipleSelection.length) {
                        for (
                            let i = 0;
                            i < this.multipleSelection.length;
                            i++
                        ) {
                            idList.push(this.multipleSelection[i].id)
                        }

                        this.axios
                            .post('/parking/parkingLot/delete', {
                                ids: idList,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    this.multipleSelection = []
                                    this.getDateList()
                                    this.$message.success('删除成功！')
                                } else {
                                    this.$message.error(
                                        '删除失败！请联系系统管理员'
                                    )
                                }
                            })
                    } else {
                        this.axios
                            .post('/parking/parkingLot/delete', {
                                ids: [e.id],
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    this.getDateList()
                                    this.$message.success('删除成功！')
                                } else {
                                    this.$message.error(
                                        '删除失败！请联系系统管理员'
                                    )
                                }
                            })
                    }
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })

            console.log(e)
        },
        //   提交
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.state == 1) {
                        this.axios
                            .post('/parking/parkingLot/add', {
                                name: this.ruleForm.name,
                                detailAddress: this.ruleForm.detailAddress,
                                remark: this.ruleForm.remark,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    console.log(res)
                                    this.getDateList()
                                    this.dialogVisible = false
                                    this.$message.success('新增成功')
                                } else {
                                    this.$message.error(res.message)
                                }
                            })
                    } else {
                        this.axios
                            .post('/parking/parkingLot/update', {
                                name: this.ruleForm.name,
                                detailAddress: this.ruleForm.detailAddress,
                                remark: this.ruleForm.remark,
                                id: this.id,
                            })
                            .then((res) => {
                                if (res.code == 0) {
                                    console.log(res)
                                    this.getDateList()
                                    this.dialogVisible = false
                                    this.$message.success('编辑成功')
                                } else {
                                    this.$message.error('编辑失败')
                                }
                            })
                    }
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        handleClose(done) {
            done()
        },
        //   查询分页
        getDateList() {
            this.axios
                .post('/parking/parkingLot/pageList', {
                    pageNo: this.currentPage1,
                    pageSize: this.pageSize,
                    name: this.queryForm.nickName,
                    //  status:this.status,
                })
                .then((res) => {
                    console.log(res)
                    if (res.code == 0) {
                        this.dataList = res.data.list
                        this.totalNum = res.data.totalNum
                    }
                })
        },
        //  多选
        handleSelectionChange(e) {
            console.log(e)
            this.multipleSelection = e
        },
        //  编辑
        handleClick(row, e) {
            this.addtitle = '编辑'
            console.log(row)
            this.state = e
            this.id = row.id
            if (this.state == 2) {
                this.dialogVisible = true
                this.ruleForm.name = row.name
                this.ruleForm.remark = row.remark
                this.ruleForm.detailAddress = row.detailAddress
            }
        },

        forbiddenBtn() {
            this.axios
                .post(
                    `/pay/wechatMch/disable?id=${this.forbiddenId}&confirmDelete=${this.forbiddenState}`
                )
                .then((res) => {
                    if (res.code == 0) {
                        this.currentPage1 = 1
                        this.getDateList()
                        this.$message.success('禁用成功')
                        this.dialogVisibleForbidden = false
                    } else {
                        this.$message.warning(res.message)
                        this.forbiddenState = 1
                        this.dialogVisibleForbidden = false
                    }
                    console.log(res)
                })
        },
        //  启用
        startUsing(row) {
            this.$router.push({
                name: 'parkManageDetails',
                query: {
                    id: row.id,
                },
            })
        },
    },
}
</script>

<style scoped lang="scss">
.dialogText {
    padding: 0px 55px;
}
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: '';
}
.clearfix:after {
    clear: both;
}

.box-card {
    position: relative;
    width: 100%;
    height: 100%;
}
.page {
    // margin: 20px 0;
    padding-right: 20px;
    text-align: right;
    width: 98%;
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: #f4f4f4;
    span {
        font-size: 15px;
        color: #666;
        display: inline-block;
        margin-left: 10px;
        vertical-align: middle;
    }

    .el-pagination {
        display: inline-block;
        vertical-align: middle;
    }

    /deep/.el-input--suffix .el-input__inner {
        background: #fff;
        color: #000;
        width: 104px;
        box-shadow: none;
    }
}
.btnBox {
    display: flex;
    justify-content: right;
}
/deep/.el-dialog {
    border-radius: 10px;
}
/deep/.el-table .el-table__row .cell {
    overflow: auto;
    height: 50px;
}
.active {
    color: #29b271;
}
.forbid {
    color: #f33f3f;
}
.table {
    margin: 10px 0 0px;
    overflow-x: scroll;
}
</style>